<template>
  <div class="course-setting">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="120px"
      class="form-scroll"
    >
      <el-row :gutter="20">
        <CoverImg
          :defaultValue="coverImgInfo"
          @e-coverImgId="setCoverImgId"
          :type="11"
        />
        <el-col :span="14" v-if="type == 1">
          <el-form-item label="所属章节" prop="name">
            <ChapterSelect :defaultValue="getChapterId" @emit="setChapterId" />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item
            :label="type == 1 ? '知识点名称' : '资源名称'"
            prop="name"
          >
            <el-input v-model.trim="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="作者">
            <UserFilterSelect
              :defaultValue="form.author"
              @e-sendUserName="setAuthor"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14" v-if="type == 2 || type == 3">
          <el-form-item label="作者单位">
            <!-- <el-input v-model.trim="form.sourceUnit"></el-input> -->
            <UnitSelect
              :defaultValue="form.sourceUnit"
              @e-unitData="setUnitId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="标签">
            <LabelSelect
              :type="$store.getters.libraryType"
              labelType="2"
              :defaultValue="form.labelValue"
              @e-labelData="setLabelId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="排序">
            <el-input-number
              v-model="form.orderBy"
              :min="1"
              :max="1000"
              size="medium"
              label="排序"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="思政元素">
            <EducationSelect :defaultValue="eduIdArr" @e-eduData="setEduId" />
          </el-form-item>
        </el-col>
        <el-col :span="20" v-if="$store.getters.libraryType == 1">
          <el-form-item label="思政目标">
            <el-input v-model.trim="form.eduTarget"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="20">
          <el-form-item label="扩展字段" class="extend-wrap">
            <div class="extend" v-for="(v, i) in extendForm" :key="i">
              <el-input
                class="extend-name"
                v-model.trim="v.name"
                placeholder="字段名称"
              ></el-input>
              <span class="extend-symbol">:</span>
              <el-input
                class="extend-content"
                v-model.trim="v.content"
                placeholder="字段内容"
              ></el-input>
              <div class="extend-button">
                <span
                  v-if="i == 0"
                  @click="addExtend()"
                  class="el-icon-circle-plus"
                  title="新增字段"
                ></span>
                <span
                  v-if="i != 0"
                  @click="delExtend(i)"
                  class="el-icon-remove"
                  title="删除字段"
                ></span>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item :label="strategyName">
            <UEditor
              ref="ueditor"
              :ueWidth="ueWidth"
              :defaultMsg="form.strategy"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="save">
      <el-button @click="submitForm('form')" type="custom" v-preventReClick
        >保 存</el-button
      >
    </div>
  </div>
</template>
<script>
import { sysKnowledgeUpdate } from '@/api/admin/courseLibrary/sysKnowledge.js'
import { setKnoledgeInfo } from '../../mixins/refreshKnowledgeById'
import { KnowledgeSetInfo } from '../../mixins/KnowledgeSetInfo'
export default {
  mixins: [setKnoledgeInfo, KnowledgeSetInfo],
  components: {
    CoverImg: () => import('@/components/coverImg'),
    EducationSelect: () => import('@/components/educationSelect'),
    UserFilterSelect: () => import('@/components/userFilterSelect'),
    LabelSelect: () => import('@/components/labelSelect'),
    ChapterSelect: () => import('@/components/dataSelect/chapterSelect'),
    UnitSelect: () => import('@/components/unitSelect'),
  },
  data() {
    return {
      type: this.$route.meta.type,
      restaurants: [],
      coverImgInfo: null,
      checkedData: {},
      form: {
        id: '',
        name: '', //知识名称
        author: this.$store.getters.username, //作者
        content: '', //内容
        orderBy: 10, //排序
        // eduId: "", //思政元素ID
        // sysKnowledgeEduList: [], //思政元素ID
        eduTarget: '', //思政目标
        pid: '0', //父级节点
        sourceUnit: '', //提供单位
        strategy: '', //融入策略
        labelType: this.$store.getters.libraryType,
        labelValue: '',
      },
      extendForm: [
        {
          name: '',
          content: '',
        },
      ],
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
      },
    }
  },
  computed: {
    strategyName() {
      return this.$store.getters.libraryType == 1 ? '融入策略' : '使用建议'
    },
    getChapterId() {
      return this.checkedData.hasOwnProperty('sysKnowledgeChapterList')
        ? this.checkedData.sysKnowledgeChapterList[0].chapterId
        : ''
    },
    ueWidth() {
      return this.$store.getters.windowWidth > 1400 ? 820 : 600
    },
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    setAuthor(v) {
      this.form.author = v
    },
    setCoverImgId(v) {
      this.form.fileId = v
    },
    setLabelId(v) {
      this.form.labelValue = v
    },
    setUnitId(v) {
      this.form.sourceUnit = v || ''
    },
    setChapterId(v) {
      this.form.sysKnowledgeChapterList = [
        {
          chapterId: v,
          courseId: this.$store.getters.courseId,
          type: this.$store.getters.libraryType,
        },
      ]
    },
    getInfo() {
      this.checkedData = this.$store.getters.curKnoledge
      this.coverImgInfo = this.checkedData.hasOwnProperty('sysAttachment')
        ? this.checkedData.sysAttachment
        : ''
      for (let i in this.checkedData) {
        if (this.form.hasOwnProperty(i)) {
          this.form[i] = this.checkedData[i] || ''
        }
      }
      this.extendForm = []
      if (
        !this.checkedData.field1 &&
        !this.checkedData.field2 &&
        !this.checkedData.field3
      ) {
        this.extendForm.push({ name: '', content: '' })
      }
      if (this.checkedData.field1) {
        this.extendForm.push(JSON.parse(this.checkedData.field1))
      }
      if (this.checkedData.field2) {
        this.extendForm.push(JSON.parse(this.checkedData.field2))
      }
      if (this.checkedData.field3) {
        this.extendForm.push(JSON.parse(this.checkedData.field3))
      }
      this.eduIdArr = this.checkedData.ideologicalEducationList
        .filter((v) => v && v.hasOwnProperty('id'))
        .map((v) => v.id)
    },
    submitForm(form) {
      this.setExtend()
      this.setEducationList()
      this.form.labelValue = this.form.labelValue.toString()
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.form.type = this.$route.meta.type
          this.edit()
        }
      })
    },
    //编辑
    edit() {
      this.form.strategy = this.$refs.ueditor.message
      sysKnowledgeUpdate(this.form).then((res) => {
        this.getInfoById() //更新store中数据
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    addExtend() {
      if (this.extendForm.length >= 3) {
        this.$message({
          message: '最多添加3条扩展字段',
          type: 'warning',
        })
        return
      }
      this.extendForm.push({ name: '', content: '' })
    },
    delExtend(idx) {
      this.extendForm.splice(idx, 1)
    },
    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields()
      for (let key in this.form) {
        this.form[key] = ''
      }
      this.form.author = this.$store.getters.username
      this.form.courseType = this.$route.meta.type
    },
  },
}
</script>
<style scoped>
.course-setting {
  padding-bottom: 20px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.form-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 60px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.course-setting .save {
  position: absolute;
  bottom: 10px;
  left: 0;
  padding-top: 10px;
  padding-left: 120px;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #ddd;
  z-index: 999;
}

.extend {
  position: relative;
  margin-bottom: 15px;
}
.extend-name {
  width: 25%;
}
.extend-symbol {
  display: inline-block;
  width: 5%;
  text-align: center;
}
.extend-content {
  width: 60%;
}
.extend-button {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  width: 30px;
  height: 40px;
  text-align: center;
}
.extend-button span {
  display: inline-block;
  font-size: 28px;
  color: #409eff;
  cursor: pointer;
  line-height: 40px;
}
.extend-button span.el-icon-circle-plus {
  color: #67c23a;
}
.extend-button span.el-icon-remove {
  color: #f56c6c;
}
</style>